<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	
	a{text-decoration:none}
	a:hover { text-decoration:none; }

	
	/* 横向“处理状态”菜单   */
	.extra-l li{
		float:left;
		margin:auto 10px;
		cursor:pointer;		
	}
	
	.extra-l li a:hover{
		padding-bottom:5px;		
		border-bottom: 1px solid gray;
		
	}
	
	.extra-l li a.curr{
		padding-bottom:5px;		
		border-bottom: 2px solid blue;
		font-weight:bold;
	}
	
	.extra-l li a.curr:hover{
		padding-bottom:5px;		
		border-bottom: 2px solid blue;
		font-weight:bold;
	}
	
	/* 纵向菜单：时间条件 */
	
	.ordertime-cont{		
		margin-bottom: 0;
		display:inline-block;			
	}	
	
	.time-list{
		display:none;
		background-color: rgba(65,65,65,.8);		
		border:2px solid #1296db;
		position:absolute;		
	}
	
	.time-list ul{		
		padding:10px 10px 0px 20px;		
	}
	
	.time-list li{
		list-style-type:none;		
	}
	
	.time-list li.curr{
		margin-left:-10px;
		/* background:   一般用图片进行模拟 ，比较好控制 */		
	}
		
	.time-list a{
		color:#dcdcdc;
	}
	
	.time-list i{
		color:white;
	}
	
	/* 纵向菜单：处理状态列表 */
	
	.deal-state-cont{
		margin-bottom: 0;
		display:inline-block;			
	}	
	
	.state-list{
		display:none;
		background-color: rgba(65,65,65,.8);		
		border:2px solid #1296db;
		position:absolute;
	}
	
	.state-list ul{
		padding:10px 10px 0px 20px;		
	}
	
	.state-list i{
		color:white;
	}
	
	.state-list li{
		list-style-type:none
	}
	
	
	.state-list li.curr{
		margin-left:-10px;
		/* list-style-type:square; */
		/* background:   一般用图片进行模拟 ，比较好控制 */
	}
		
	.state-list a{
		color:#dcdcdc;
	}
	
	
	
	/* 时间条件 MOUSE形状 */
	.time-txt{
		cursor:pointer;
	}
	
	/* 合同处理状态条件 MOUSE形状 */
	.state-txt{
		cursor:pointer;
	}
		
</style>

</head> 
<body>
<!-- content -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<h4 style="font-size:20px"><strong>我的订单</strong></h4>
			</div>
		</div>
		<br>
		<!-- 横向菜单 -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<ul class="extra-l" style="list-style: none;">
					<li value="0"><a href="javascript:void(0);"	class="txt curr">全部订单</a></li>
					<li value="1"><a href="javascript:void(0);"	class="txt">未建合同</a></li>
					<li value="2"><a href="javascript:void(0);"	class="txt">己建合同</a></li>
					<li value="4"><a href="javascript:void(0);"	class="txt"	>甲方己确认</a></li>
					<li value="3"><a href="javascript:void(0);"	class="txt"	>乙方己确认</a></li>					
					<li value="5"><a href="javascript:void(0);"	class="txt"	>执行中..</a></li>
					<li value="6"><a href="javascript:void(0);"	class="txt"	>执行完毕</a></li>
				</ul>
			</div>
		</div>
		<br>
		<div class="row clearfix">
			<div class="col-md-12 column">
				<table class="table" border="1" cellspacing="10">
					<thead>
						<!-- 时间条件列 -->
						<tr>
							<th>
								<div class="ordertime-cont">
									<div class="time-txt" >
										<span class="text" id="ordertime-cond" value="1">近一个月订单 </span>
										<i class="icon-angle-down icon-large" style="color:black"></i>
									</div>
									<div class="time-list" style="z-index:100">
										<ul>
											<li class="curr" value="1"><i class="icon-ok"></i><a href="javascript:void(0);" >近一个月订单</a></li>
											<li class="" 	 value="2"><i class="icon-ok"></i><a href="javascript:void(0);" >近两个月订单</a></li>
											<li class="" 	 value="3"><i class="icon-ok"></i><a href="javascript:void(0);" >近三个月订单</a></li>
											<li class="" 	 value="6"><i class="icon-ok"></i><a href="javascript:void(0);" >近六个月订单</a></li>			
											<li class="" 	 value="12"><i class="icon-ok"></i><a href="javascript:void(0);" >今年内订单</a></li>
										</ul>
									</div>
								</div>
								<div class="order-detail-txt ac" style="float: right; margin-right:150px">订单详情</div>
							</th>
							
							<th>收货人</th>
							<th>订单金额</th>
							<th style="width:108px">
								<div class="deal-state-cont" id="orderState">
									<div class="state-txt">
										<span class="text" id="dealstate-cond" value="100">全部状态</span>
										<i class="icon-angle-down icon-large " style="color:black"></i>
									</div>
									<div class="state-list" style="z-index:100">
										<ul>											
											<li value="0" class="curr"><i class="icon-ok"></i><a href="javascript:void(0)">全部状态</a></li>
											<li value="1"	class=""><i class="icon-ok"></i><a href="javascript:void(0)">未建合同</a></li>
											<li value="2"   class=""><i class="icon-ok"></i><a href="javascript:void(0)">己建合同</a></li>
											<li value="3"   class=""><i class="icon-ok"></i><a href="javascript:void(0)">乙方己确认</a></li>
											<li value="4"	class=""><i class="icon-ok"></i><a href="javascript:void(0)">甲方己确认</a></li>
											<li value="5"	class=""><i class="icon-ok"></i><a href="javascript:void(0)">执行中..</a></li>
											<li value="6"	class=""><i class="icon-ok"></i><a href="javascript:void(0)">执行完毕</a></li>
										</ul>
									</div>
								</div>
							</th>
							<th>操作</th>
						</tr>
					</thead>

					<!--------------每种订单一个tbody ---------->
					<tbody  th:each="orderx:${orderList}" th:attr="id='tb-'+${orderx.order.id}">
						<!-- <tr class="sep-row">
							<td colspan="5"></td>
						</tr> -->

						<tr  class="tr-th" >
							<td colspan="5">
								<span class="gap"></span> 
								<span th:text="${#calendars.format(orderx.order.createTime,'yyyy-MM-dd HH:mm:ss')}"
									class="dealtime" title="2017-05-08 12:12:27">订单时间</span> 
									<input id="datasubmit-53848251722"	value="2017-05-08 12:12:27" type="hidden"> 
									<span class="orderNo"> 订单号： 
										<a name="orderIdLinks"	class="order-detail" target="_blank"
											th:href="@{/front/order/detail(id=${orderx.order.id})}" th:text="${orderx.order.orderId}"
											>订单号</a>
									</span>
									<span class="contractNo" th:if="${orderx.order.contractNo}"> 合同号： 
										<a name="contractNoLinks" class="contract-detail" target="_blank"
											th:href="@{/back/contract/detail(id=${orderx.order.contractId})}" th:text="${orderx.order.contractNo}"
											>合同号</a>

									</span>
									

								<div class="tr-operate" style="float: right">
									 <a href="javascript:void(0)"										
										class="order-del" 
										th:attr="data-id=${orderx.order.id},contract-state=${orderx.order.contractState}"
										title="删除">删除</a>

								</div></td>
						</tr>
												
						<tr th:each="orderItem,iterStat:${orderx.orderItems}"    class="tr-bd" id="track53853319081" oty="0,4,70">
							<!--  测试数据<span th:text="${iterStat.index}"></span> -->
							<!-- 测试数据循环：<span th:text="${orderItem.sku_name}"></span> -->
							
							<!-- 如果是第一个元素时 -->	
							<td th:if="${iterStat.index==0}">
								<!-- sku图片  -->
								<div class="goods-item p-2538742">
									<div class="p-img">
										<a th:href="@{/front/product/detail/{itemId}/{skuId}(itemId=${orderItem.item_id},skuId=${orderItem.sku_id})}"
											target="_blank"
											clstag="click|keycount|orderinfo|order_product"
										>
											 
											<img class=""
											th:src="${orderItem.picture_url}"
											th:title="${orderItem.sku_name}"											
											data-lazy-img="done" height="60" width="60">

										</a>
									</div>
									<!-- sku名称 -->
									<div class="p-msg">
										<div class="p-name">
											<a th:href="@{/front/product/detail/{itemId}/{skuId}(itemId=${orderItem.item_id},skuId=${orderItem.sku_id})}"
												target="_blank" 
												class="a-link"
												clstag="click|keycount|orderinfo|order_product"												
												th:title="${orderItem.sku_name}" th:text="${orderItem.sku_name}"></a>
										</div>
									</div>
								</div>
								<div class="goods-number"  th:text="'x'+${orderItem.num}">数量</div>
							</td>

							<!-- buyer's name -->
							<td th:if="${iterStat.index==0}"  th:attr="rowspan=${orderx.orderItemNum}" >
								<div class="">
									<div class="prompt-01 prompt-02">
										<div class="pc">
											<strong th:text="${orderx.order.name}">收货人姓名</strong>											
										</div>
										<div class="p-arrow p-arrow-left"></div>
									</div>
								</div>
							</td>
							
							<!-- 实际支付金额  及支付方式-->
							<td th:if="${iterStat.index==0}"  th:attr="rowspan=${orderx.orderItemNum}" >
								<div class="amount">
									<span th:text="'￥'+${orderx.order.totalPrice}"></span> <br> <span class="ftx-13">线下支付</span>
								</div>
							</td>
							<!-- 订单状态  及订单详情-->
							<td th:if="${iterStat.index==0}" th:attr="rowspan=${orderx.orderItemNum}">
								<div class="status">
									
									<!-- 取消状态 -->
									<span th:switch="${orderx.order.yn}"  th:remove="tag">
										<span th:case='2' th:remove="tag"><span class="order-status"> 已取消 </span> <br></span>
									</span>
									
									<!-- 其它状态 -->
									<span th:switch="${orderx.order.contractState}"  th:remove="tag">
										<span th:case='1' th:remove="tag"><span class="order-status"> 未建合同 </span> <br></span>
										<span th:case='2' th:remove="tag"><span class="order-status"> 己建合同 </span> <br></span>
										<span th:case='3' th:remove="tag"><span class="order-status"> 乙方已确认 </span> <br></span>
										<span th:case='4' th:remove="tag"><span class="order-status"> 甲方己确认 </span> <br></span>
										<span th:case='5' th:remove="tag"><span class="order-status"> 执行中 </span> <br></span>
										<span th:case='6' th:remove="tag"><span class="order-status"> 执行完毕 </span> <br></span>										
									</span>								
									
									<!-- 订单详情 -->
									<a	th:href="@{/front/order/detail(id=${orderx.order.id})}" class="order-detail"	target="_blank"><b>订单详情</b></a>										
										
									<!-- 如果已经建立合同，则显示合同详情  -->	
									<span th:if="${orderx.order.contractState} ge 2" th:remove="tag">
										<br>
										<a	th:href="@{/back/contract/detail(id=${orderx.order.contractId})}" class="contract-detail" target="_blank"><b>合同详情</b></a>
									</span>	
										
								</div>
							</td>
							
							<!-- 操作区，根据订单的状态显示不同的操作 -->
							<td th:if="${iterStat.index==0}" th:attr="rowspan=${orderx.orderItemNum}" >
								<div class="operate">
								
									<!-- 如是取消状态 :操作-->
									<span th:switch="${orderx.order.yn}"  th:remove="tag">
										<!-- 如是未取消状态 -->
										<span th:case='1' th:remove="tag">
											<div th:attr="id='cancel-button-'+${orderx.order.id}" >
												<a	href="javascript:void(0);"  th:attr="data-id=${orderx.order.id},contract-state=${orderx.order.contractState}" class="btn-cancel" >
													<b>取消订单</b> 
												</a>
												<br>
											</div>	
										</span>
										<!-- 如是取消状态 -->
										<span th:case='2' th:remove="tag">
											<div th:attr="id='button-buy-again-'+${orderx.order.id}" >
												<a	href="javascript:void(0);"  th:attr="data-id=${orderx.order.id}" class="btn-buy-again" >
													<b>恢复购买 </b> 
												</a>
												<br>
											</div>	
										</span>
									</span>
									
									<!-- 合同状态-操作  -->
									<span th:switch="${orderx.order.contractState}"  th:remove="tag">
										<!-- 如LM方己确认 -->
										<span th:case='2' th:remove="tag">
											<div th:attr="id='confirm-button-'+${orderx.order.id}" >
												<a	href="javascript:void(0);"  th:attr="data-id=${orderx.order.id},data-contract-id=${orderx.order.contractId},data-contract-state=${orderx.order.contractState}"  class="btn-confirm" >
													<b>确认合同</b> 
												</a>
												<br>
											</div>	
										</span>										
									</span>				
									
								</div>	
									
							</td>
							
							<!-- 非第一个元素 -->
							<td th:if="${iterStat.index!=0}">
								<!-- 非第一个元素  -->
								<div class="goods-item p-3597549">
									<!--  sku图片 -->
									<div class="p-img">
										<a th:href="@{/front/product/detail/{itemId}/{skuId}(itemId=${orderItem.item_id},skuId=${orderItem.sku_id})}"
											target="_blank"
											clstag="click|keycount|orderinfo|order_product"	> 
											<img class=""
											th:src="${orderItem.picture_url}"
											th:title="${orderItem.sku_name}"
											data-lazy-img="done" height="60" width="60">

										</a>
									</div>
									<!-- sku 名称 -->
									<div class="p-msg">
										<div class="p-name">
											<a th:href="@{/front/product/detail/{itemId}/{skuId}(itemId=${orderItem.item_id},skuId=${orderItem.sku_id})}"
												target="_blank"
												class="a-link"
												clstag="click|keycount|orderinfo|order_product"												
												th:title="${orderItem.sku_name}"
												th:text="${orderItem.sku_name}"></a>
										</div>
									</div>
								</div>
								<div class="goods-number"  th:text="'x'+${orderItem.num}">数量</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		
		<!-- 订单选择条件  -->
		<script th:inline="javascript">  
			/*<![CDATA[*/
				
			var g_ordertime_cond = [[${orderTimeCond}]];  //回传的时间条件 
			var g_dealstate_cond=[[${dealStateCond}]];    //回传的合同处理状态条件
			
			
			/*]]>*/  
		</script>		
		
		<script type="text/javascript" th:src="@{/static/js/my_order/my_order.js}"></script>	
		
		
		
		
</body>
</html>